<template>
  <div class="TableBox">
    <div class="DisplayFlex">
      <div class="leftBtn BtnBox" v-if="refresh">
        <!-- 保留坑位 -->
        <!-- <el-button>清除日期过滤器</el-button>
        <el-button>清除所有过滤器</el-button> -->
      </div>
      <div class="rightBtn BtnBox" v-if="refresh">
        <!-- 刷新 -->
        <el-button icon="el-icon-refresh" size="mini" circle @click="GetList"></el-button>
      </div>
    </div>
    <!-- v-loading="loading" -->
    <!-- :resizable="Resizable" -->
    <el-table
      ref="table"
      :row-class-name="tableRowClassName"
      :class="[isShowHeaderCheck ? '' : 'is-show-header-check']"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :border="border"
      :header-cell-style="{ background: 'rgb(245, 247, 250)', 'text-align': 'center' }"
      :data="tableData"
      :row-key="keyVal"
      :height="height"
      :max-height="maxHeight"
      :highlight-current-row="highLightCurrentRow"
      style="width: 100%"
      @row-click="onRowClick"
      @selection-change="Selection"
      @select-all="selectAllData"
      @cell-click="cellClick"
    >
      <span slot="empty">暂无数据</span>
      <div v-for="(item, index) in configData" :key="index">
        <!-- 插槽 -->
        <slot v-if="item.slot" :name="item.slot" fixed="right"></slot>
        <!-- 带多选 -->
        <el-table-column
          v-else-if="item.type == 'selection'"
          :fixed="item.fixed"
          :type="item.type"
          :width="item.width || 60"
          :selectable="isDisabled"
          :min-width="item.minWidth"
          :align="item.align || 'center'"
        >
        </el-table-column>
        <!-- 带序号 -->
        <el-table-column
          v-else-if="item.type == 'index'"
          :type="item.type"
          :fixed="item.fixed"
          :width="item.width || 60"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align || 'center'"
        >
        </el-table-column>
        <!-- 图片 -->
        <el-table-column
          v-else-if="item.type == 'image'"
          :type="item.type"
          :prop="item.prop"
          :label="item.label"
          width="140"
          min-width="120"
          :align="item.align || 'center'"
        >
          <template slot-scope="scope">
            <el-image style="width: 140px; height: 60px" :src="scope.row.logo" :preview-src-list="[...scope.row.logo]">
            </el-image>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column
          :resizable="false"
          v-else-if="item.formatter"
          :type="item.type"
          show-overflow-tooltip
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
          :min-width="item.minWidth"
          :align="item.align || 'center'"
        >
        </el-table-column>
        <!-- 多级表头 -->
        <el-table-column
          :resizable="false"
          v-else-if="item.children"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :align="item.align || 'center'"
        >
          <el-table-column
            v-for="(current, index) in item.children"
            show-overflow-tooltip
            :key="index"
            :label="current.label"
            :align="current.align || 'center'"
            :min-width="current.minWidth"
            :prop="current.prop"
          ></el-table-column>
        </el-table-column>
        <!-- 高亮 -->
        <el-table-column
          v-else-if="item.type == 'highlight'"
          :resizable="false"
          show-overflow-tooltip
          :prop="item.prop"
          :width="item.width"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align || 'center'"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini">{{ scope.row[item.prop] }}</el-button>
          </template>
        </el-table-column>
        <!-- 普通 -->
        <!-- :min-width="item.minWidth || flexColumnWidth(item, tableData)" -->
        <!-- :show-overflow-tooltip="!showAll" -->

        <el-table-column
          :min-width="item.minWidth"
          show-overflow-tooltip
          v-else
          :type="item.type"
          :prop="item.prop"
          :width="item.width"
          :label="item.label"
          :align="item.align || 'center'"
        >
        </el-table-column>
      </div>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    highLightCurrentRow: {
      default: false,
    },
    // 规则
    configData: {
      type: Array,
    },
    // 数据
    tableData: {
      type: Array,
    },
    // 边框
    border: {
      type: Boolean,
      default: true,
    },
    // 是否拖动宽度
    Resizable: {
      type: Boolean,
      default: false,
    },
    // key
    keyVal: {
      type: String,
      default: '',
    },
    refresh: {
      type: Boolean,
      default: false,
    },
    // 刷新key
    listKey: {
      type: String,
      default: 'GetList',
    },
    loading: {
      type: Boolean,
      default: false,
    },
    // 表格高度
    height: {
      type: String,
      default: null,
    },
    // 最大高度
    maxHeight: {
      type: String,
      default: null,
    },
    // 是否显示表头复选框
    isShowHeaderCheck: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      // loading: false,
    }
  },
  methods: {
    // 无经纬度的表格整行变色
    tableRowClassName({ row }) {
      if (row.changeYellow && row.changeYellow == true) {
        return 'highlight-row'
      }
      return ''
    },
    // 返回选中状态
    Selection(val) {
      this.$emit('Selection', val)
    },
    //是否可以选择
    isDisabled(row) {
      if (row.isDisabledCheck && row.isDisabledCheck == 'true') {
        return false
      } else {
        return true
      }
    },

    //外置全选
    changeAll() {
      this.$refs.table.toggleAllSelection()
    },
    // 外置根据条件批量选择
    manySelect(row, selected) {
      this.$refs.table.toggleRowSelection(row, selected)
    },
    // 清空表格选择
    clearAll() {
      this.$refs.table.clearSelection()
    },

    //点击全选按钮时
    selectAllData(val) {
      this.$emit('selectAllData', val)
      this.Selection(val)
    },
    // 刷新数据
    GetList() {
      this.$TableGetList({
        listKey: this.listKey,
      })
    },
    Refresh() {
      this.$parent.$parent.GetList()
    },
    onRowClick(row) {
      this.$emit('onRowClick', row)
    },
    cellClick(row, column, cell, event) {
      this.$emit('cellClick', row, column, cell, event)
    },
    // 自适应表格列宽
    flexColumnWidth(item, arr1, flag = 'max') {
      // item为该列的配置对象;tableData为该表格的数据源(传变量);
      // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
      // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
      //判断是否需要动态返回 width
      if (!item.showAll) {
        return
      }
      //定义 str 为该列的字段名，转为字符串
      const str = item.prop + ''
      let columnContent = ''
      if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {
        return
      }
      if (!str || !str.length || str.length === 0 || str === undefined) {
        return
      }
      if (flag === 'equal') {
        // 获取该列中第一个不为空的数据(内容)
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i][str].length > 0) {
            // console.log('该列数据[0]:', arr1[0][str])
            columnContent = arr1[i][str]
            break
          }
        }
      } else {
        // 获取该列中最长的数据(内容)
        let index = 0
        for (let i = 0; i < arr1.length; i++) {
          const now_temp = arr1[i][str] ? arr1[i][str] + '' : ''
          const max_temp = arr1[index][str] ? arr1[index][str] + '' : ''
          if (now_temp.length > max_temp.length) {
            index = i
          }
        }
        columnContent = arr1[index][str]
      }
      // console.log('该列数据[i]:', columnContent)
      // 以下分配的单位长度可根据实际需求进行调整
      let flexWidth = 0
      if (columnContent && columnContent.length > 0) {
        for (const char of columnContent) {
          if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
            // 如果是英文字符，为字符分配8个单位宽度
            flexWidth += 8
          } else if (char >= '\u4e00' && char <= '\u9fa5') {
            // 如果是中文字符，为字符分配15个单位宽度
            flexWidth += 15
          } else {
            // 其他种类字符，为字符分配9个单位宽度
            flexWidth += 9
          }
        }
      }
      if (flexWidth < 80) {
        // 设置最小宽度
        flexWidth = 80
      }
      // if (flexWidth > 250) {
      //   // 设置最大宽度
      //   flexWidth = 250
      // }
      return flexWidth + 'px'
    },
  },
}
</script>
<style lang="less" scoped>
.BtnBox {
  padding: 0 10px;
  box-sizing: border-box;
}

.TableBox {
  box-sizing: border-box;
  overflow: auto;
}

// 解决复选框不居中的问题
/deep/.el-checkbox:last-of-type {
  margin: 0 !important;
  padding: 0 !important;
}
.is-show-header-check {
  /deep/.el-table__header {
    .el-checkbox {
    }
  }
}
// /deep/.highlight-row {
//   background-color: #ffffe0 !important;
// }
/deep/.el-table th {
  background-color: #013f70 !important;
  color: #fff !important;
  // border: none;
}
/deep/.el-table__cell {
  // border: none;
}
/deep/.el-table th.el-table__cell.is-leaf {
  // border: none;
}

/deep/.el-table td {
  background-color: #020c14 !important;
  color: #fff !important;
  // border: none;
}

/deep/.el-table th.el-table__cell.is-leaf {
  // border: none;
}
/deep/.el-table--border {
  // border: none;
}
/deep/.el-table::before {
  // height: 0;
}
/deep/.el-table__empty-block {
  background-color: #020c14;
}
</style>
